<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>缓冲区分析</title>
    <link href="https://js.arcgis.com/4.18/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.18/"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/Point", "esri/geometry/Polygon",
                "esri/layers/GraphicsLayer","esri/tasks/GeometryService","esri/tasks/support/BufferParameters",
                "esri/geometry/Polyline"],
            function (Map, MapView, Graphic, Point, Polygon, GraphicsLayer,GeometryService,BufferParameters,Polyline,) {

                let map = new Map({
                    basemap: "streets"
                });

                //二维视图
                let view = new MapView({
                    map: map,
                    container: "viewDiv",
                    zoom:5,
                    center:[120.585276,30.761195400427663]
                });

                let geometryService = new GeometryService({
                    url: "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer",
                });
                var markGraphicLayer = new GraphicsLayer();
                var bufferGraphicLayer = new GraphicsLayer();
                map.add(markGraphicLayer);
                map.add(bufferGraphicLayer);

                var polygonmarkGraphicLayer = new GraphicsLayer();
                var polygonbufferGraphicLayer = new GraphicsLayer();
                map.add(polygonmarkGraphicLayer);
                map.add(polygonbufferGraphicLayer);


                //------------------------------------点---------------------------------------------------
                let point = new Point({
                    x: 120.585276,
                    y: 30.761195400427663,
                    spatialReference:4490
                });
                let symbol={
                    color: [255, 0, 0, 1],
                    outline: {
                        width: 1,//外边框线的粗细
                        style: 'solid',
                        color: [255, 0, 0],
                    },
                    size: 10,//点的大小
                    style: "circle",
                    type: "simple-marker",
                }
                let graphic = new Graphic({
                    geometry:point,
                    symbol:symbol
                });
                markGraphicLayer.add(graphic);


                //----------------------------------------------面-----------------------------------------------
                let polygon=new Polygon({
                    rings:[
                        [[115.798499, 28.783553],
                            [115.75998, 28.895433],
                            [115.900834, 28.821535],
                            [115.785276, 28.759237],
                            [115.713987, 28.733902]]
                    ],
                    spatialReference:4490
                });
                let fillsymbol={
                    color: [255, 0, 0, 1],
                    outline: {
                        width: 2,//外边框线的粗细
                        style: 'solid',
                        color: [255, 0, 0],
                    },
                    style: "solid",
                    type: "simple-fill",
                }
                let polygongraphic = new Graphic({
                    geometry:polygon,
                    symbol:fillsymbol
                });
                polygonmarkGraphicLayer.add(polygongraphic);



                //-------------------------------面的缓冲区------------------------------
                let buffersymbol={
                    color: [197, 97, 20, 0.5],
                    outline: {
                        width: 1,
                        color: [197, 97, 20],
                        style: 'solid',
                    },
                    size: 20,//点的大小要比里面的大
                    style: "circle",
                    type: "simple-marker",
                }

                let pointParams = new BufferParameters({
                    geometries:[point],
                    distances:[50],
                    unit: "kilometers",
                    bufferSpatialReference:4546,
                    outSpatialReference:4490
                });


                geometryService.buffer(pointParams).then((result)=>{
                    let graphic = new Graphic({
                        geometry:result[0],
                        symbol:buffersymbol
                    });
                    bufferGraphicLayer.add(graphic);
                });

                //--------------------------------------面的缓冲区----------------------------

                let buffersfillymbol={
                    color: [197, 97, 20, 0.5],
                    outline: {
                        width: 1,//外边框线的粗细
                        style: 'solid',
                        color: [255, 0, 0],
                    },
                    style: "solid",
                    type: "simple-fill",
                }



                let polygonParams = new BufferParameters({
                    geometries:[polygon],
                    distances:[50],
                    unit: "kilometers",
                    bufferSpatialReference:4546,
                    outSpatialReference:4490
                });



                geometryService.buffer(polygonParams).then((result)=>{
                    let graphic = new Graphic({
                        geometry:result[0],
                        symbol:buffersfillymbol
                    });
                    polygonbufferGraphicLayer.add(graphic);
                });

            });
    </script>
</head>

<body>
<div id="viewDiv">
</div>

</body>
</html>
